<template>
  <div>
    <el-container>
      <!-- 头部 -->
      <el-header>
        <el-row :gutter="20">
          <el-col :span="4">
            <img class="logImg" src="../../assets/imgs/OIP-C.jpg" alt="">
          </el-col>
          <el-col :span="14">
            <h1>个人博客</h1>
          </el-col>
          <el-col :span="6">
            <el-tag class="tag">你好,{{ userName }}</el-tag>
            <el-dropdown>
              <el-button type="primary">
                管理<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="out">退出</el-dropdown-item>
                  <el-dropdown-item @click="cancellation">注销</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside>
          <el-radio-group v-model="isCollapse" style="margin-bottom: 10px">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">隐藏</el-radio-button>
          </el-radio-group>
          <el-menu :collapse-transition="false" unique-opened :collapse="isCollapse" router :default-active="activePath"
            background-color="#ffae78">
            <el-menu-item v-for="item of routeUrl" :index="item.url" :key="item.id" @click="changeHandler(item.url)">
              <el-icon><icon-menu /></el-icon>
              <template #title>{{ item.title }}</template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 内容区 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
 
<script setup>
import { ref, inject } from 'vue'
import { AdminStore } from '../../stores/manager'
import { useRouter, useRoute } from 'vue-router'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Edit,
  ArrowDown
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const adminStore = AdminStore()
const axios = inject('axios')

const isCollapse = ref(false)

// 用户名
let userName = window.localStorage.getItem('account') ? window.localStorage.getItem('account') : '未登陆'

// 路由路径信息
const routeUrl = [
  { id: 1, title: '文章管理', url: '/backstage/article' },
  { id: 2, title: '分类管理', url: '/backstage/category' },
]
// 侧边栏点击变色
let activePath = window.localStorage.getItem('activePatn')


// 记住你
const changeHandler = (val) => {
  activePath = val
  window.localStorage.setItem('activePatn', activePath)
}
// 退出
const out = () => {
  router.push('/login')
  ElMessage({
    type: 'success',
    message: '已退出',
  })
}
// 注销
const cancellation = () => {
  ElMessageBox.confirm(
    '确定注销吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      window.localStorage.removeItem('account')
      window.localStorage.removeItem('password')
      window.localStorage.removeItem('rember')
      router.push('/login')
      ElMessage({
        type: 'success',
        message: '已注销',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消注销',
      })
    })
}

</script>
 
<style lang='less' scoped>
.el-header {
  text-align: center;
  border-bottom: 2px solid orange;
  margin: 5px auto 10px;
  width: 90%;

  .logImg {
    width: 50px;
    height: 50px;
    border-radius: 30%;
    margin-top: 3px;
  }

  .tag {
    height: 36px;
    margin: 15px 5px 0 0;
    color: black;
    font-weight: bold;
    font-size: 10px;
  }

  .el-dropdown {
    margin-top: 18px;
  }
}

.el-container {
  .el-aside {
    margin-left: 80px;
    width: 13%;

    .el-menu {
      height: 80vh;
    }
  }
}
</style>